import React, { useState } from 'react';

const FAQs = [
    { 
        question: '如何跟踪我的订单？', 
        answer: '您可以在订单页面查看订单状态。',
        details: [
            '访问“我的订单”页面。',
            '选择您想跟踪的订单。',
            '点击“跟踪”按钮以查看详细运输信息。'
        ]
    },
    { 
        question: '如何退货？', 
        answer: '请在退货页面提交退货申请。',
        details: [
            '确保在退货政策范围内。',
            '使用以下地址寄回您的商品。',
            '检查您的退货申请状态在订单页面上。'
        ]
    },
    { 
        question: '客服工作时间是什么时候？', 
        answer: '我们的客服工作时间是每天9:00至18:00。',
        details: [
            '您可以通过电话或在线聊天与我们联系。',
            '在非工作时间，您可以发送邮件联系我们。'
        ]
    },
    { 
        question: '如何更改我的密码？', 
        answer: '您可以在账户设置中更改密码。',
        details: [
            '进入账户设置页面。',
            '选择“更改密码”选项。',
            '输入您的旧密码和新密码。'
        ]
    },
    // ... 您可以继续添加其他问题和答案 ...
];

const FAQ: React.FC = () => {
    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);

    const toggleAnswer = (index: number) => {
        setExpandedIndex(expandedIndex === index ? null : index);
    };

    return (
        <div style={{ padding: '10px', marginTop: '35px' }}>
            {FAQs.map((faq, index) => (
                <div key={index}>
                    <div 
                        style={{ 
                            cursor: 'pointer', 
                            backgroundColor: '#f0f0f0', 
                            padding: '10px', 
                            margin: '5px 0', 
                            borderRadius: '5px'
                        }}
                        onClick={() => toggleAnswer(index)}
                    >
                        {faq.question}
                    </div>
                    {expandedIndex === index && (
                        <div style={{ marginLeft: '10px', padding: '5px', backgroundColor: '#e7f3ff', borderRadius: '5px' }}>
                            <p>{faq.answer}</p>
                            <ul>
                                {faq.details.map((detail, i) => (
                                    <li key={i}>{detail}</li>
                                ))}
                            </ul>
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
};

export default FAQ;